@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tabs';

$types: 'primary', 'secondary';

.tabBar {
  @include composite-var($tabs-container);

  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.tabBarMain {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
}

.scrollContainer {
  overflow-x: scroll;
  overflow-y: visible;
  max-width: 100%;
}

.tabsRow {
  position: relative;

  overflow: hidden;
  display: flex;
  flex-direction: row;

  width: fit-content;

  white-space: nowrap;

  &[data-type='primary'] {
    @include composite-var($tabs-primary);
  }

  &[data-type='secondary'] {
    @include composite-var($tabs-secondary);
  }
}

.marker {
  position: absolute;
  bottom: 0;
  background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
  transition:
    left 0.1s ease,
    width 0.1s ease;

  @each $type in $types {
    &[data-type='#{$type}'] {
      @include composite-var($tabs, 'tab-button-#{$type}', 'marker');
    }
  }
}

.divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
